<template>
	<view class='container'>
	  <view class='all_ads'>
<!-- 		<view class='all_ads_top'>
		  <text>未央区</text>
		  <image src='/images/roaddeil_01.png'></image>
		  <text class='color'>朝阳区</text>
		</view>
		<view class='all_ads_city'>
		  <text>陕西</text>
		  <text>西安</text>
		  <text class='city'>北京市</text>
		</view> -->
		<view class='ditu_all'>
		  <image src="../../../static/images/ditu.png"></image>
		  <view class='bg'>
		  </view>
		  <view class='bg_zi'>
			<view class='lc_num'>里程约<text> 320</text> 公里</view>
			<view class='button_di' @tap='start_ads'><text>查看地图</text><text class='iconfont icon-you'></text></view>
		  </view>
		</view>
<!-- 		<view class='ads_fa'>
		  <view class='ads_fa_left'>
			<image src='/images/options_05.png'></image>
			<text>发货</text>
		  </view>
		  <text class='ads_xx'>陕西省西安市未央区西安海洋大厦西安海洋大厦有限公司</text>
		</view>
		<view class='ads_fa ads_shou'>
		  <view class='ads_fa_left ads_shou_left'>
			<image src='/images/options_03.png'></image>
			<text>发货</text>
		  </view>
		  <text class='ads_xx'>陕西省西安市未央区西安海洋大厦西安海洋大厦有限公司</text>
		</view> -->
	  </view>
	  <view class='all_goods'>
		<text class='roaddeil_title huo_title'>维修关键词</text>
		<view class='huowu_ul'>
		  <view class='huowu_ul_li'>
			<text>维修对象</text>
			<text class='huo_color'>手机</text>
		  </view>
		  <view class='huowu_ul_li'>
			<text>型号</text>
			<text class='huo_color'>苹果/8plus</text>        
		  </view> 
		  <view class='huowu_ul_li'>
			<text>维修类型</text>
			<text class='huo_color'>碎屏</text>
		  </view> 
		  <view class='huowu_ul_li'>
			<text>服务</text>
			<text class='huo_color'>上门维修</text>
		  </view> 
		</view>
	  </view>
	  <view class='all_goods'>
		<text class='roaddeil_title'>电话地址</text>
		<view class='all_goods_li'>
		  <text class='name'>联系人</text>
		  <text class='mi'>李先生</text>
		</view>
		<view class='all_goods_li'>
		  <text class='name'>电话</text>
		  <text class='mi'>12548756548</text>
		</view>
		<view class='all_goods_li'>
		  <text class='name'>维修时间</text>
		  <text class='mi'>2018-11-19  17：05</text>
		</view>
		<view class='all_goods_li'>
		  <text class='name'>地址</text>
		  <text class='mi'>西安市未央区凤城二路海洋大厦703</text>
		</view>
	  </view>
	  <view class='all_user all_goods'>
		<view class='all_user_top'>
		  <text class='user_top_title'>托运人</text>
		  <view class='freight_li_time'>
			<text>订单编号：</text>
			<view class='time_all'>
			  <text class='color'>201809131566</text>
			</view>    
		  </view>
		</view>
		<view class='all_user_bottom'>
		  <view class='user_bottom_left'>
			<image class="icon" src="../../../static/images/ditu.png"></image>
			<text>阿山</text>
			<image class='phone' @tap="start_pnone" src='../../../static/images/options_01.png'></image>
		  </view>
		  <view class='user_bottom_right'>
			  <image src='../../../static/images/index_12.png'></image>
		  </view>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			start_pnone(){
				uni.makePhoneCall({
					phoneNumber: '18235461258' 
				});
			},
			start_ads(){
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
.all_ads{
  background: #fff;
  width:100%;
  box-sizing: border-box;
}
.all_ads_top{
  margin-top: 20upx;
  box-sizing: border-box;
  line-height: 70upx;
  color: #5a70fb;
  padding: 0 30upx;  
}
.all_ads_top image{
  height: 26upx;
  width: 40upx;
  margin: 0 40upx;
} 
.all_ads_top .color{
  color: #f76c8a;
}
.all_ads_city{
  color: #a6a6a6;
  font-size: 26upx;
  padding: 0 30upx;  
  margin-bottom: 35upx;
}
.all_ads_city text{
  padding-right: 20upx;
}
.all_ads_city .city{
  padding-left: 70upx;
}
.ditu_all{
  width: 100%;
  height: 200upx;
  position: relative;
}
.ditu_all image{
  width: 100%;
  height: 100%;
}
.ditu_all .bg{
  position: absolute;
  top: 0;
  background: #000;
  opacity: .4;
  width: 100%;
  height: 100%;
  color: #fff
}
.ditu_all .bg{
  padding: 0 30upx;
  box-sizing: border-box;
}
.button_di{
  font-size: 26upx;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  color:#fff;
}
.lc_num{
  line-height: 70upx;
  color:#fff;
}
.lc_num text{
  color: #5a70fb;
  font-weight: bold;
}
.ditu_all .bg_zi{
  padding: 50upx 30upx;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  top: 0;
  width: 100%;
}
.ads_fa_left{
  display: flex;
  flex-direction: column;
  width: 90upx;
  align-items: center;
  padding-right: 40upx;
  color: #5a70fb;
  font-size: 22upx;
}
.ads_fa_left image{
  height: 50upx;
  width: 50upx;
}
.ads_fa{
  display: flex;
  margin: 0 30upx;
  padding: 40upx 10upx;
  background:#fff;
  border-bottom: 1px solid #ececec;
  align-items: center;
}
.ads_fa .ads_xx{
  color: #a6a6a6;
  font-size: 26upx;
}
.ads_shou_left{
  color: #f76c8a
}
.ads_shou{
  border-bottom: none;
}
/* 车辆需求 */
.roaddeil_title{
  line-height: 85upx;
  margin: 0 30upx;
  display: block;
  font-size: 34upx;
  font-weight: 600;
  color:#41434b;
}
.huo_title{
  border-bottom: 1px solid #ececec;    
}
.all_goods{
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  border-top:20rpx solid #f5f5f5;
}
.all_goods_li{
  margin: 0 30upx;
  line-height: 80upx;
  border-top: 1px solid #ececec;  
}
.all_goods_li .mi{
  color: #a6a6a6;
  font-size: 26upx;
}
.all_goods_li .name{
  width: 220upx;
  display: inline-block;
}
/* 货物信息 */
.huowu_ul{
  display: flex;
  padding-top: 20upx;
}
.huowu_ul_li{
  width: 33.33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-bottom: 20upx;
}
.huo_color{
  color: #5a70fb;
  font-size: 26upx;
  line-height: 50upx;
}
/* 截单 */
.freight_li_time{
  line-height: 55upx;
  display: flex;
  justify-content: center;
  font-size: 24upx;
}
.freight_li_time .time_all{
  color: #a6a6a6;
  font-size: 24upx;
}
.freight_li_time .time_all .color{
  color: #5a70fb;
  
}
.all_user_top{
  display: flex;
  justify-content: space-between;
  margin:0 30upx;
  line-height: 80upx;
  align-items: center;
  border-bottom: 1px solid #ececec
}
.user_top_title{
  color:#41434b;
  font-size:34rpx;
font-weight:600;
}
.user_bottom_right image{
  height: 80upx;
  width: 80upx;
}
.user_bottom_right{
  display: flex;
  flex-direction: column;
  color: #f76c8a;
  font-size: 22upx;
  align-items: center;
}
.user_bottom_left .icon{
  height: 97upx;
  width: 97upx;
  border-radius: 50%;
}
.user_bottom_left text{
  padding: 0 20upx;
}
.user_bottom_left .phone{
  height: 50upx;
  width: 50upx;
}
.user_bottom_left{
  display: flex;
  align-items: center;
}
.all_user_bottom{
  display: flex;
  justify-content:space-between;
  width: 100%;
}
.all_user_bottom{
  padding: 30upx;
  box-sizing: border-box;
}
</style>
